<template>
  <cl-page>
    <view class="page">
      <view class="header">
        <view class="image-wrapper">
          <image class="image" :src="info?.picture"></image>
        </view>
        <view class="title">{{ info?.title }}</view>
      </view>
      <view class="goods">
        <cl-waterfall :ref="setRefs('list')" :column="2">
          <template #default="{ list }">
            <cl-waterfall-column v-for="(columns, index) in list" :key="index">
              <goods-item :item="item" v-for="item in columns" :key="item.id" />
            </cl-waterfall-column>
          </template>

          <template #empty>
            <cl-empty :fixed="false" :height="500" />
          </template>
        </cl-waterfall>
      </view>
    </view>
  </cl-page>
</template>

<script lang="ts" setup>
  import { reactive, ref } from "vue";
  import { router, useCool, usePager } from "/@/cool";
  import { onReady, onShareAppMessage } from "@dcloudio/uni-app";
  import GoodsItem from "/@/components/goods/item.vue";

  const { service, refs, setRefs } = useCool();
  const { onRefresh, onData } = usePager();

  // 特选
  const info = ref<Eps.MarketFeatureInfoEntity>();
  const needRefresh = ref(true);

  onReady(async () => {
    await refresh();
  });

  // 获取详情
  async function refresh() {
    if (!needRefresh.value) return;

    await service.market.feature
      .current()
      .then((resp) => {
        // console.log(resp)
        info.value = resp
        needRefresh.value = false;

        const goods = resp?.goodsList.map(g => g.good)
        refs.list.refresh(goods);

      })
  }

  onShareAppMessage(() => {
    return {
      title: "薇薇大码甄选 - " + info.value?.title,
      path: "/pages/market/feature",
    };
  });

  defineExpose({
    refresh,
  });
</script>

<style lang="scss" scoped>
  .page {
    .header {
      padding: 20rpx 0;
      text-align: center;
      background-color: #fff;


      .image {
        width: 200rpx;
        height: 200rpx;
        border-radius: $uni-border-radius-circle;
      }

      .title {
        font-size: 40rpx;
      }
    }

    .goods {
      padding: 14rpx 14rpx 0;
    }
  }
</style>